<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="layuimini-container">
<div class="layuimini-main">
    <div class="layui-form layuimini-form">

    <form class="layui-form" action="" id="userAddForm" lay-filter="userAddFormFilter">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" class="layui-input"
                       id="username" name="username"
                       lay-verify="required|username" lay-reqtext="用户名为必填项"
                       autocomplete="off" placeholder="请输入用户名" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码<span style="color: red">*</span> </label>
            <div class="layui-input-block">
                <input type="password" class="layui-input"
                       id="password" name="password"
                       lay-verify="required|pass" lay-reqtext="密码为必填项"
                       placeholder="请输入密码" autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="text" class="layui-input"
                       id="name" name="name"
                       lay-verify="required|name" lay-reqtext="真实姓名为必填项"
                       autocomplete="off" placeholder="请输入真实姓名">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">院系</label>
            <div class="layui-input-block">
                <select id="college" name="college" lay-filter="college"
                        lay-verify="required" lay-reqtext="院系为必填项">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">专业</label>
            <div class="layui-input-block">
                <select id="major" name="major" lay-filter="major"
                        lay-verify="required" lay-reqtext="专业为必填项">>
                    <option value="">请选择</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">班级</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input"
                       id="clazz" name="clazz"
                       lay-verify="required" lay-reqtext="班级为必填项"
                       placeholder="请输入班级" autocomplete="off" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">年级</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input"
                       id="grade" name="grade"
                       lay-verify="required" lay-reqtext="年级为必填项"
                       placeholder="请选择入学年份" autocomplete="off" readonly>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">在校职务</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input"
                       id="schoolJob" name="schoolJob"
                       placeholder="请输入在校职务" autocomplete="off">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">手机<span style="color: red">*</span></label>
            <div class="layui-input-block">
                <input type="tel" class="layui-input"
                       id="phone" name="phone" lay-verify="required|phone"
                       placeholder="请输入手机号码"  autocomplete="off"  lay-reqtext="请输入正确的电话号码">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">QQ</label>
            <div class="layui-input-block">
                <input type="number" class="layui-input"
                       id="QQ" name="QQ"
                       placeholder="请输入QQ号码" autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select id="role" name="role" lay-filter="role" >
                    <option value="">请选择</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户状态</label>
            <div class="layui-input-block">
                <select name="state" lay-filter="state" >
                    <option value="">请选择</option>
                    <option value="启用">启用</option>
                    <option value="禁用">禁用</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
            <textarea placeholder="请输入备注信息" class="layui-textarea"
                name="remark" lay-filter="remark"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </form>

</div>
</div>
</div>
<script>
    layui.use(['form','laydate'], function () {
        var form = layui.form,
            layer=layui.layer,
            laydate=layui.laydate,
            initYear,
            $ = layui.$;

        function formInit() {
            //初始化加载院系
            let url = 'CollegeServlet';
            let params = {method: 'search'};
            let successFn = function (res) {
                res = JSON.parse(res);
                let colleges = res.data;
                for (let i = 0; i < colleges.length; i++) {
                    $('#college').append("<option value='"+colleges[i].id+"'>"+colleges[i].name+"</option>");
                }
                form.render('select');
            };
            $.get(url, params, successFn);

            //初始化加载院系
            url = 'RoleServlet';
            params = {method: 'search'};
            successFn = function (res) {
                res = JSON.parse(res);
                let roles = res.data;
                for (let i = 0; i < roles.length; i++) {
                    $('#role').append("<option value='"+roles[i].id+"'>"+roles[i].name+"</option>");
                }
                form.render('select');
            };
            $.get(url, params, successFn)

        }
        formInit();

        form.on('select(college)', function (data) {
            //清空目前专业下拉狂中的数据
            $('#major').empty();
            $('#major').append("<option value=''>请选择</option>");
            let college = data.value;
            let url = 'MajorServlet';
            let params = {method: 'search', collegeSearch: college};
            let successFn = function (res) {
                res = JSON.parse(res);
                let majors = res.data;
                for (let i = 0; i < majors.length; i++) {
                    $('#major').append("<option value='"+majors[i].id+"'>"+majors[i].name+"</option>");
                }
                form.render('select');
            }
            $.get(url, params, successFn);
        });

        //焦点监听
        $("#username").blur(function(){
            var value = this.value;
            if(typeof value == "undefined" || value == null || value == ""){
                layer.msg("用户名为必填项！",{icon:5});
            }else if(/^[A-Za-z][A-Za-z0-9]{2,14}$/.test(value)==false){
                layer.msg("用户名应为字母数字组合，开头是字母，3-15 个字符！",{icon:5});
            }
        })
        $("#password").blur(function(){
            var value = this.value;
            if(typeof value == "undefined" || value == null || value == ""){
                layer.msg("密码为必填项！",{icon:5});
            }else if(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,19}$/.test(value)==false){
                layer.msg("密码是6-20 个字符，由数字和字母构成!",{icon:5});
            }
        })
        $("#name").blur(function(){
            var value = this.value;
            if(typeof value == "undefined" || value == null || value == ""){
                layer.msg("真实姓名为必填项！",{icon:5});
            }else if(/^[\u4e00-\u9fa5]{2,5}$/.test(value)==false){
                layer.msg("请输入您的真实姓名!",{icon:5});
            }
        })
        $("#phone").blur(function(){
            var value = this.value;
            if(typeof value == "undefined" || value == null || value == ""){
                layer.msg("手机为必填项！",{icon:5});
            }else if(/^1[0-9]{10}$/.test(value)==false){
                layer.msg("请输入正确的手机号码!",{icon:5});
            }
        })


        //监听提交
        form.verify({
            username:function (value) {
                if(/^[A-Za-z][A-Za-z0-9]{2,14}$/.test(value)==false){
                    return '用户名应为字母数字组合，开头是字母，3-15 个字符'
                }
            },
            name:function (value) {
                if(/^[\u4e00-\u9fa5]{2,5}$/.test(value)==false){
                    return '请输入您的真实姓名'
                }
            },
            pass:[/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,19}$/,'密码是6-20 个字符，由数字和字母构成'],

        });



        laydate.render({
            elem:'#grade',
            type:'year',
            trigger:'click',
            ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象
                initYear = date.year;
            },
            change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                var selectYear = date.year;
                var differ = selectYear-initYear;
                if (differ != 15 && differ != -15) {
                    if($(".layui-laydate").length){
                        $("#grade").val(value);
                        $(".layui-laydate").remove();
                    }
                }
                initYear = selectYear;
            }
        })
        form.render();


        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let url = 'UserServlet?method=add';
            let successFn = function (res) {
                if (res == 'true') {
                    layer.close(parentIndex);
                    layer.msg("添加成功",{icon: 1});
                    /*$("#formId")  ：是jQuery对象 ，后面可以点出 调用jQuery函数
                    $("#formId")[0]  ：是 原生js 对象 ，后面可以点出 调用 原生js 函数*/
                    //提交成功后清空表单信息
                    $('#userAddForm')[0].reset();
                    form.render();
                    parent.layui.table.reload('currentTableId');
                }
            }
            $.post(url, data.field, successFn);
            return false;
        });
    });
</script>